<template>
  <view class="page custom-page">
    <custom-head gradient back title="添加积分">
      <view class="tool" slot="right">
        <i class="iconfont icon-fenlei fenlei" @click="enterAdd"></i>
      </view>
    </custom-head>

    <view class="search flex a-center">
      <view class="search-input">
        <i class="iconfont icon-sousuo1 bgc"></i>
        <input class="bao_input" type="search" confirm-type="search" placeholder="请输入学号/姓名" v-model="name" @confirm="confirm" placeholderStyle="backgroundColor: #f6f6f6; borderRadius: 50rpx;" />
      </view>
      <view class="submit" @click="handleSearch">搜索</view>
    </view>

    <view class="content">
      <view v-for="(item, index) in studentsList" class="content_total"> 
        <view :class="{'item': true, 'active': item.active}" @click="handleActive(index)">
          <view>
            <image class="img" :src="item.avatar" mode="widthFix"/>
          </view>
          <view class="text_count">{{ item.count }}</view>
          <view class="text_name">{{ item.name }}</view>
        </view>
      </view>
    </view>


    <view class="buttom_btn">
      <view>
        <u-checkbox-group @change="checkboxGroupChange">
          <u-checkbox 
            v-model="item.checked" 
            v-for="(item, index) in Alist" :key="index" 
            :name="item.name"
            shape="circle"
          >{{item.name}}</u-checkbox>
        </u-checkbox-group>
      </view>
      <u-button class="btn" type="primary" @click="handleAddIntegral">批量添加积分</u-button>
    </view>

  </view>
</template>
<script>
import { getStudent } from '../../api/modules/student'
import { textToPy, pinyinSort } from '../../utils/index'

export default {
  data() {
    return {
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      name: '',
      scrollTop: 0,
      list: [
        { text: '添加学员信息', path: '/pages/student/addition' },
        { text: '批量添加学员信息', path: '/pages/student/batchAddition' }
      ],
      indexList: [],
      studentList: [],

      Alist: [
				{
					name: '全选',
					checked: false,
					disabled: false
				},
			],
      studentsList: [],
    }
  },

  mounted() {
    // this._getStudent()
    // this.studentsList = getApp().globalData.glb_list.students.map(i => ({...i, active: false, avatar: `${this.static_uri}${i.avatar}`}))
    // console.log('---全局', getApp().globalData.glb_list.students)

    this.studentsList = this.glbSchool.students.map(i => ({...i, active: false}))

    // console.log('--获取全局的学生', this.glbSchool.students)
  },

  methods: {
    handleSearch() {
      if (!this.name) {
        this.studentsList = getApp().globalData.glb_list.students.map(i => ({...i, active: false, avatar: `${this.static_uri}${i.avatar}`})).filter(i => i.sid === this.glbId)
        return;
      }
      let backList = [];

      this.getSearchItem(this.studentsList, backList, this.name);
      this.studentsList = backList;
    },
    getSearchItem(arr, backList, param) { // 拿到input 处理好的数据
      for(const item of arr) {
        if (Array.isArray(item)) {
          this.getSearchItem(item, backList, param)
        } else {
          if (item && item.name === param) {
            backList.push(item)
          } else if(item && item.student_number === param) {
            backList.push(item)
          }
        }
      }
    },
   
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
      if(e.length) {
        let newStudentsList = this.studentsList.map((item, i) => ({...item, active: true }));
        this.studentsList = newStudentsList
      } else {
        let newStudentsList = this.studentsList.map((item, i) => ({...item, active: false }));
        this.studentsList = newStudentsList
      }
		},

    handleActive(index) {  // 选中某个学生
      let newStudentsList = this.studentsList.map((item, i) => ({...item, active: index === i ? !item.active  : item.active }));

      let selectAll = newStudentsList.every(item => item.active)
      if (selectAll) {
        this.Alist = [{
					name: '全选',
					checked: true,
					disabled: false
				}]
      } else {
        this.Alist = [{
					name: '全选',
					checked: false,
					disabled: false
				}]
      }

      this.studentsList = newStudentsList

    },
    handleAddIntegral(){ // 批量添加积分
      let checkItem = this.studentsList.filter(i => i.active)
      getApp().globalData.selectStudent = checkItem
      uni.navigateTo({
        url: '/pages/home/addIntegralItem'
      })
    },


    // 、、、、、、、、、、、、、、、、、、、、、、
    enter(path, id) {
      uni.navigateTo({
        url: `${path}?id=${id}`
      })
    },

    enterAdd() {
      uni.navigateTo({
        url: '/pages/student/addition'
      })
    },

    enterPage(e) {
      var path = this.list[e].path
      uni.navigateTo({
        url: path
      })
    },

    _getStudent() {
      console.log('000 测试')
      getStudent().then((res) => {
        console.log('res', res)
        const list = res.data.list.map((item) => ({ ...item, pname: textToPy(item.name) }))
        const tempArr = pinyinSort(list)

        console.log('tempArr', tempArr)
        this.studentList = tempArr
        this.indexList = Object.keys(tempArr)
      })
    }
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop - 114
  }
}
</script>
<style scoped lang="scss">
.fenlei {
  color: #fff;
  font-size: 50rpx;
}

.student {
  background-color: #fff;
  position: relative;
  padding-bottom: 100rpx;
  margin-top: 114rpx;
}

.page {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #fff;
}

.search {
  width: 100%;
  /* height: 114rpx; */
  height: 137rpx;
  background-color: #fff;
  padding: 25rpx 30rpx;
  position: fixed;
  top: calc(44px + var(--status-bar-height));
  z-index: 2;
  left: 0;

  .bgc {
    background-color: #f6f6f6;
    border-radius: 50rpx;
    width: 90rpx;
    height: 60rpx;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding-left: 4rpx;
  }

  .bao_input {
    background-color: #f6f6f6;
    border-radius: 50rpx;
  }

  .submit {
    font-size: 24rpx;
    color: #303133;
    padding: 0 30rpx;
    line-height: 64rpx;
  }
}

.content {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;

  /* display: grid;
  grid-template-columns: repeat(auto-fill, 100rpx);
  grid-gap: 10px;
  justify-content: center; */
  
  width: 100%;
  background-color: #fff;
  margin-top: 137rpx;
  padding-left: 1%;
  padding-bottom: 200rpx;

  .content_total {
    padding: 0rpx 2rpx;
    height: 240rpx;
    margin-bottom: 5rpx;
  }

  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 180rpx;
    height: 240rpx;
    border-radius: 8rpx;
    margin-bottom: 5rpx;
    background-color: #f4f4f4;

    .img {
      width: 120rpx !important;
      height: 120rpx !important;
      border-radius: 50%;
    }
    .text_count {
      font-size: 24rpx;
      font-weight: 700;
      color: #F93534;
    }
    .text_name {
      font-size: 28rpx;
    }
  }

  .active {
    background-color: #eaf4ff;
    border: 2rpx solid #8eb9ff;
  }
}

.buttom_btn {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: 100%;
  padding: 10rpx 0;
  bottom: 0;

  .btn {
    width: 520rpx;
    height: 88rpx;
    border-radius: 48rpx;
    margin: 0;
  }
}



.search-input {
  flex: 1;
  background-color: #fff;
  height: 64rpx;
  border-radius: 32rpx;
  position: relative;

  input {
    font-size: 24rpx;
    color: #666;
    line-height: 64rpx;
    outline: none;
    background: none;
    height: 64rpx;
    padding-left: 60rpx;
  }

  i {
    position: absolute;
    left: 15rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36rpx;
    color: #8f9399;
  }
}

.studentList {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.student-item {
  width: 100%;
  padding: 10rpx 20rpx;

  .touxiang {
    width: 120rpx !important;
    height: 120rpx !important;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }

  .touxiang image {
    width: 100%;
    height: 100%;
  }

  .info {
    flex: 1;

    .title {
      font-size: 32rpx;
      color: #303133;
      margin-bottom: 10rpx;
    }

    .title span {
      font-size: 24rpx;
    }

    .text {
      font-size: 24rpx;
      color: #303133;
    }

    .integral {
      margin-left: 65rpx;
      color: #2979ff;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}
.submit-box {
  position: fixed;
  height: 100rpx;
  background-color: #fff;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 8;
}
.addStudent {
  width: 686rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
}
</style>
